// src/pages/Contact/index.tsx
import Header from '../../components/Header';
import { useNavigate } from 'react-router-dom';
import { PhonebookOutline } from 'antd-mobile-icons';
import './index.css';

const ContactPage = () => {
  const navigate = useNavigate();
  
  // 联系人信息
  const contacts = [
    {
      name: '索文鹏',
      phone: '15291371111',
      position: '总经理'
    },
    {
      name: '李书龙',
      phone: '18309137032',
      position: '业务经理'
    }
  ];

  // 公司信息
  // const companyInfo = {
  //   address: '',
  //   phone: '',
  //   email: '',
  //   zipCode: ''
  // };

  // 处理拨打电话
  const handleCall = (phoneNumber: string) => {
    window.location.href = `tel:${phoneNumber}`;
  };

  return (
    <div className="contact-container">
      <Header 
        title="联系我们" 
        showBack={true} 
        onBack={() => navigate(-1)} 
      />
      <div className="contact-content">
        <div className="contact-header">
          <h1>联系我们</h1>
          <p>澄城海泰电子材料有限责任公司</p>
        </div>
        
        {/* <div className="company-info-card">
          <h2 className="section-title">
            <EnvironmentOutline className="section-icon" />
            公司地址
          </h2>
          <div className="info-item">
            <p className="info-text">{companyInfo.address}</p>
            <p className="info-subtext">邮编: {companyInfo.zipCode}</p>
          </div>
        </div>
        
        <div className="company-info-card">
          <h2 className="section-title">
            <PhonebookOutline className="section-icon" />
            公司电话
          </h2>
          <div className="info-item">
            <p className="info-text">{companyInfo.phone}</p>
          </div>
        </div>
        
        <div className="company-info-card">
          <h2 className="section-title">
            <MailOutline className="section-icon" />
            邮箱地址
          </h2>
          <div className="info-item">
            <p className="info-text">{companyInfo.email}</p>
          </div>
        </div> */}
        
        <div className="contacts-section">
          <h2 className="section-title">联系人</h2>
          <div className="contacts-grid">
            {contacts.map((contact, index) => (
              <div className="contact-card" key={index}>
                <div className="contact-header-info">
                  <h3 className="contact-name">{contact.name}</h3>
                  <p className="contact-position">{contact.position}</p>
                </div>
                <div className="contact-phone-container">
                  <PhonebookOutline className="phone-icon" />
                  <a 
                    href={`tel:${contact.phone}`} 
                    className="contact-phone"
                    onClick={(e) => {
                      e.preventDefault();
                      handleCall(contact.phone);
                    }}
                  >
                    {contact.phone}
                  </a>
                </div>
                <button 
                  className="call-button"
                  onClick={() => handleCall(contact.phone)}
                >
                  立即拨打
                </button>
              </div>
            ))}
          </div>
        </div>
        
        {/* <div className="business-hours">
          <h2 className="section-title">工作时间</h2>
          <div className="hours-content">
            <p>周一至周五: 8:00 - 18:00</p>
            <p>周六: 9:00 - 12:00</p>
            <p>周日: 休息</p>
          </div>
        </div> */}
        
        {/* <div className="map-section">
          <h2 className="section-title">公司位置</h2>
          <div className="map-placeholder">
            <EnvironmentOutline className="map-icon" />
            <p>地图位置</p>
            <p className="map-subtext">陕西省渭南市澄城县西长街36号</p>
          </div>
        </div> */}
      </div>
    </div>
  );
};

export default ContactPage;